const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //自动清空打包目录
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports =(env, args) => {
  return {
    // profile: true,
    // cache: {
    //   type: "filesystem",
    //   maxAge:5184000000,
    //   profile:true,
    //   cacheDirectory:"node_modules/.cache/webpack"
    // },
    mode: 'development', // 环境模式
    entry: path.resolve(__dirname, './src/main.ts'), // 打包入口
    output: {
      path: path.resolve(__dirname, 'dist'), // 打包出口
      filename: 'js/[name].js', // 打包完的静态资源文件名
    },
    resolve: {
      alias: {
        '@': path.resolve('src'),
      },
      // 支持那些扩展名不用写
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.vue', '.json'],
    },
    module: {
      // loader
      rules: [
        {
          test: /\.vue$/,
          use: ['vue-loader'],
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
        {
          test: /\.tsx?$/, //ts 或者tsx
          exclude: /node_modules/, // 不包含那些模块
          use: [
            {
              loader: 'ts-loader',
              options: {
                appendTsSuffixTo: ['\\.vue$'], // 用于编译. vue文件中的ts
              },
            },
          ],
        },
        {
          test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
          type: 'asset',
          generator: { filename: 'img/[contenthash:8][ext][query]' },
        },
      ],
    },
    plugins: [
      new CleanWebpackPlugin(),
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        templateContent: `<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Admin Webpack</title>
</head>
<body>
    <div id="app" />
</body>
</html>`,
      }),
    ],
    devServer: {
      port: 8080, // 端口
      historyApiFallback: true, // 支持history 模式
      static: {
        directory: path.join(__dirname, 'public'),
      },
    },
  }
}
